<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用插件</title>
</head>
<body>
    <script>
        function cycle() {
            $(document).ready(function () {
                $('#books').cycle();
            });
        }

        function cycleConfig() {
            $(document).ready(function () {
                $('#books').cycle({
                    timeout: 2000,
                    speed: 200,
                    pause: true
                });
            });
        }

        function cycleDefaults() {
            $.fn.cycle.defaults.timeout = 10 * 1000;
            $.fn.cycle.defaults.random = true;

            $(document).ready(function () {
                $('#books').cycle({
                    timeout: 2000,
                    speed: 200,
                    pause: true
                });
            });
        }

        function controls() {
            $(document).ready(function () {
                var $books = $('#books');
                var $controls = $('<div id="books-controls"></div>');
                $controls.insertAfter($books);
                $('<button>Pause</button>').click(function (e) {
                    e.preventDefault();
                    $books.cycle('pause');
                }).appendTo($controls);
                $('<button>Resume</button>').click(function (e) {
                    e.preventDefault();
                    $books.cycle('resume');
                }).appendTo($controls);
            });
        }

        function resume() {
            $(document).ready(function () {
                var $books = $('#books');
                var $controls = $('<div id="books-controls"></div>');
                $controls.insertAfter($books);
                $('<button>Pause</button>').click(function (e) {
                    e.preventDefault();
                    $books.cycle('pause');
                }).appendTo($controls);
                $('<button>Resume</button>').click(function (e) {
                    e.preventDefault();
                    $('ul:paused').cycle('resume');
                }).appendTo($controls);
            })
        }

        function pause() {
            var $books;
            if ($.cookie('cyclePaused')) {
                $books.cycle('pause');
            }
        }

        function cookie() {
            var $books;
            var $controls = $('<div id="books-controls"></div>').insertAfter($books);
            $('<button>Pause</button>').click(function (e) {
                e.preventDefault();
                $books.cycle('pause');
                $.cookie('cyclePaused', 'y');
            }).appendTo($controls);
            $('<button>Resume</button>').click(function (e) {
                e.preventDefault();
                $('ul:paused').cycle('resume');
                $.cookie('cyclePaused', null);
            }).appendTo($controls);
        }

        function color() {
            var $books;
            $books.hover(function () {
                $books.find('.title').animate({
                    backgroundColor: '#eee',
                    color: '#000'
                }, 1000);
            }, function () {
                $books.find('.title').animate({
                    backgroundColor: '#000',
                    color: '#fff'
                }, 1000);
            });
        }

        function baseClass() {
            $(document).ready(function () {
                $('h1').click(function () {
                    $(this).toggleClass('highlighted', 'slow');
                });
            });
        }

        function easying() {
            $(document).ready(function () {
                $('h1').click(function () {
                    $(this).toggleClass('highlighted', 'slow', 'easeInexpo');
                });
            });
        }

        function effect() {
            $(document).ready(function () {
                var $books = $('#books');
                var $controls = $('<div id="books-controls"></div>').insertAfter($books);
                $('<button>Resume</button>').click(function (e) {
                    e.preventDefault();
                    var $paused = $('ul:paused');
                    if ($paused.length) {
                        $paused.cycle('resume');
                    } else {
                        $(this).effect('shake', { distance: 10 });
                    }
                }).appendTo($controls);
            });
        }

        function resizable2() {
            var $books = $('#books');
            $books.find('.title').resizable();
        }

        function resizable() {
            var $books = $('#books');
            $books.find('.title').resizable({
                handles: 's'
            });
        }

        function button() {
            $(document).ready(function () {
                $('button').button();
            });
        }

        function iconButton() {
            var $books = $('#books');
            var $controls = $('<div id="books-controls"></div>').insertAfter($books);
            $('<button>Pause</button>').click(function (e) {
                e.preventDefault();
                var $paused = $('ul:paused');
                if ($paused.length) {
                    $paused.cycle('resume');
                } else {
                    $(this).effect('shake', { distance: 10 });
                }
            }).button({
                icons: { primary: 'ui-icon-pause' }
            }).appendTo($controls);
            $('<button>Resume</button>').click(function (e) {
                e.preventDefault();
            }).button({
                icons: { primary: 'ui-icon-play' }
            }).appendTo($controls);
        }

        function slider2() {
            var $controls = $('<div id="books-controls"></div>').insertAfter($books);
            $('<div id="slider"></div>').slider({
                min: 0,
                max: $('#books li').length - 1
            }).appendTo($controls);
        }

        function slider() {
            $('<div id="slider"></div>').slider({
                min: 0,
                max: $('#books li').length - 1,
                slide: function (e, ui) {
                    $books.cycle(ul.value);
                }
            }).appendTo($controls);
        }

        function before() {
            $(document).ready(function () {
                $('#books').cycle({
                    timeout: 2000,
                    speed: 200,
                    pause: true,
                    before: function () {
                        $('#slider').slider('value', $('#books li').index(this));
                    }
                });
            });
        }
    </script>
</body>
</html>